import useLoadQuestionData from "../../../hooks/useLoadQuestionData";
import {EditCanvas} from "./EditCanvas";
import styles from './index.module.scss'
import {useDispatch} from "react-redux";
import {changeSelectId} from "../../../store/componentsReducer";
import {LeftPanel} from "./LeftPanel";
import {RightPanel} from "./RightPanel";
import {EditHeader} from "./EditHeader";
import useGetPageInfo from "../../../hooks/useGetPageInfo";
import {useTitle} from "ahooks";
import {Suspense} from "react";

export function Edit() {
    const {loading} = useLoadQuestionData()
    const dispatch = useDispatch()

    function clearSelectedId() {
        dispatch(changeSelectId(''))
    }

    const {title} = useGetPageInfo()
    useTitle(`问卷编辑 - ${title}`)
    return (
        <div className={styles.container}>
            <div style={{backgroundColor: '#fff'}}>
                <EditHeader></EditHeader>
            </div>
            <div className={styles['content-wrapper']}>
                <div className={styles.content}>
                    <div className={styles.left}>
                        <LeftPanel></LeftPanel>
                    </div>
                    <div className={styles.main} onClick={clearSelectedId}>
                        <div className={styles['canvas-wrapper']}>
                            <EditCanvas loading={loading}/>
                        </div>
                    </div>
                    <div className={styles.right}>
                        <RightPanel></RightPanel>
                    </div>
                </div>
            </div>
        </div>
    );
}